<template>
    <div class="customerInfoMationContainer">
        <div class="lookcustomer">
            <div class="custAndorder">
              <split-vertical title="条件查询"></split-vertical>
              <div class="order" style="width:500px;">
                <el-input placeholder="请输入订单编号" v-model="orderCode" class="input-with-select">
                  <el-button slot="append" icon="el-icon-search"  @click="findCustorInfo"></el-button>
                </el-input>
              </div>
<!--                <div class="order">-->
<!--                    <el-input v-model="orderCode" placeholder="请输入订单编号" style="width:250px;" size="medium"></el-input>-->
<!--                    <el-button @click="findCustorInfo" size="medium">查询</el-button>-->
<!--                </div>-->
            </div>
            <div class="custdetail" style="background:#fff;">
              <split-vertical title="主订单信息"></split-vertical>
              <v-table :tableParams="tableParams" v-on:handleOperation="handleOperation" v-on:getTemplateRow="getTemplateRow" ></v-table>
            </div>
            <div class="complaintInfomation">
              <split-vertical title="客诉信息"></split-vertical>
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="90px" style="width:100%;margin-top:10px;">
                <el-row>
                  <el-col :span="6">
                    <div class="grid-content bg-purple">
                      <el-form-item label="客诉原因" prop="complainReason">
                        <el-select v-model="editContent.complainReason" placeholder="请选择" allow-create filterable
                                   clearable>
                          <el-option
                            v-for="item in complaintReason"
                            :key="item.id"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="解决方案" prop="complainSolution">
                        <el-select v-model="editContent.complainSolution" placeholder="请选择"  allow-create filterable clearable>
                            <el-option
                            v-for="item in solveList"
                            :key="item.id"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <el-form-item label="情况说明" prop="complainSituation">
                                <el-input v-model="editContent.complainSituation"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <el-form-item label="备注" prop="remark">
                                <el-input   v-model="editContent.remark"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                  <el-row >
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <el-form-item label="姓名" prop="receiverName">
                                <el-input v-model="editContent.customerName"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <el-form-item label="联系方式" prop="receiverPhone">
                                <el-input v-model="editContent.customerContact"  onkeyup="this.value=this.value.replace(/[^0-9.]/g,'')"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <el-form-item label="客诉类型" prop="complainType">
                                <el-select v-model="editContent.complainType" placeholder="请选择">
                                    <el-option
                                    v-for="item in exchangeGoods"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <el-form-item label="责任方" prop="responsibleParty">
                                <el-select v-model="editContent.responsibleParty" placeholder="请选择">
                                    <el-option
                                    v-for="item in ResponsibleParty"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                  </el-row>
                  <el-row >
                  <el-col :span="6">
                        <div class="grid-content bg-purple">
                           <el-form-item label="产生费用" prop="isCost">
                                <el-radio-group v-model="editContent.isCost">
                                    <el-radio :label="true">是</el-radio>
                                    <el-radio :label="false">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="费用类型" prop="costType">
                            <el-select v-model="editContent.costType" placeholder="请选择">
                                <el-option
                                v-for="item in costType"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <el-form-item label="额外费用" prop="extraCharges">
                                <el-input v-model="editContent.extraCharges" oninput="this.value=this.value.replace(/[^\-?\d.]/g,'')"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <el-form-item label="快递费用" prop="postageAssume">
                                <el-input v-model="editContent.postageAssume" oninput="this.value=this.value.replace(/[^\-?\d.]/g,'')"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
              </el-row>
              <el-row >
                  <el-col :span="6">
                      <div class="grid-content bg-purple">
                          <el-form-item label="订单编号">
                              <el-input v-model="editContent.orderCode"></el-input>
                          </el-form-item>
                      </div>
                  </el-col>
                  <el-col :span="6">
                      <div class="grid-content bg-purple">
                          <el-form-item label="退货单号" prop="returnExpressCode">
                              <el-input v-model="editContent.returnExpressCode"></el-input>
                          </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="物流退货" >
                            <div class="find">
                                <el-input type="textarea" :rows="4" v-model="logicsReturn" style="display:inline-block"></el-input>
                                <p>
                                    <el-button @click="findReg" size="small" >查询</el-button>
                                </p>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item class="btn">
                    <el-button type="primary" @click="submitForm('ruleForm')" :disabled="isCallBtn" size="medium">确认</el-button>
                    <el-button @click="cancelAdd" size="medium">取消</el-button>
                </el-form-item>
              </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import VTable from "components/common/PageTable/VTable"
import api from 'js/service'
import {localStorage} from 'js/localStorage'
import SplitVertical from "components/common/SplitVertical"
export default {
    inject:['reload'],
    data(){
        return{
            //创建按钮是否disabled
            isCallBtn:false,
            // v-model
            orderCode:'',
            logicsReturn:'',
            //主订单的行数据
            rowData:{},
            //单选
            orderId:'',
            receiverPhone:'',
            receiverName:'',
            tableParams:{
                dataArray:[],
                showMultiSelection:false,
                showRadioSelection:true,
                columnArray:[
                    {label: '订单公司', prop: 'companyName',  sortable: false},
                    {label: '订单平台', prop: 'channelName',  sortable: false},
                    {label: '订单编号', prop: 'orderId',  sortable: false},
                    {label: '订单时间', prop: 'orderTime',sortable: false},
                    {label: '渠道商品名称', prop: 'orderItemName',sortable: false},
                    {label: '购买数量', prop: 'purchaseNum',sortable: false,width:'80'},
                    {label: '姓名', prop: 'receiverName',sortable: false,width:'80'},
                    {label: '联系方式', prop: 'receiverPhone',sortable: false,width:'120'},
                    {label: '地址', prop: 'receiverAddress',sortable: false},
                    {label: '订单金额', prop: 'orderMoney',sortable: false,width:'80'},
                    {label: '订单状态', prop: 'orderStatus',sortable: false,width:'80'},
                    {label: '快递单号', prop: 'expressCode',sortable: false},
                ],
                rowHandle:{
                    view:{
                        show:false
                    },
                    update:{
                        show:false
                    },
                    deleted:{
                        show:false
                    },
                    buttonArray:[
                        {
                            text: '查看物流',
                            show: true,
                            type: 'text',
                            methodName: 'lookLogics'
                        },{
                            text: '详情',
                            show: true,
                            type: 'text',
                            methodName: 'details'
                        }
                    ],
                }
            },
            ruleForm:{
                /** 客诉原因 */
                complainReason:'改地址',
                /** 客诉情况说明 */
                complainSituation:'',
                /** 客诉解决方案 */
                complainSolution:'已处理',
                /** 联系方式 */
                // customerContact:'',
                /** 客户姓名 */
                // customerName:'',
                /**客诉类型 **/
                complainType:"咨询",
                /**备注 **/
                remark:'',
                /** 客诉承担责任方(1:无 2:邮政 3:厂家) */
                responsibleParty:'无',
                /*是否产生费用*/
                isCost:false,
                /** 客诉费用类型(0:无 1:采购 2:物流 3:采购和物流) */
                costType:'无',
                //快递费用
                postageAssume:'',
                /** 客诉额外费用 */
                extraCharges:'',
                /** 客户退货物流单号 */
                returnExpressCode:'',
            },
            //客诉类型
            exchangeGoods:[
               {
                    value:'0' ,
                    label:"咨询",
                },{
                    value:'1',
                    label:'退货'
                },{
                    value:'2',
                    label:'换货'
                },{
                    value:'3',
                    label:'补发'
                }],

            //责任方
            ResponsibleParty:[
                {
                    value:'1' ,
                    label:"无",
                },{
                    value:'2',
                    label:'邮政'
                },{
                    value:'3',
                    label:'厂家'
                }],
            //费用类型
            costType:[
                {
                    value :'0',
                    label:"无"
                },
                {
                    value:'1' ,
                    label:"商品采购费",
                },{
                    value:'2',
                    label:'物流费'
                },
                {
                    value:'3',
                    label:'采购和物流费用'
            }],
            complaintReason:[
                {
                    id:'1',
                    value :'改地址',
                    label:"改地址"
                },
                {
                    id:'2',
                    value:'改号码' ,
                    label:"改号码",
                },
                {
                    id:'3',
                    value:'破损',
                    label:'破损'
                },
                {
                    id:'4',
                    value:'缺货',
                    label:'缺货'
                },
                {
                    id:'5',
                    value:'未发货',
                    label:'未发货'
                },
                {
                    id:'6',
                    value:'质量',
                    label:'质量'
                },
                {
                    id:'7',
                    value:'咨询',
                    label:'咨询'
                },
              {
                id:'8',
                value:'限制发货',
                label:'限制发货'
              },
              {
                id:'9',
                value:'催货',
                label:'催货'
              },
              {
                id:'10',
                value:'丢件',
                label:'丢件'
              },
                {
                    id:'11',
                    value:'七天无理由退货',
                    label:'七天无理由退货'
                },
              {
                id:'12',
                value:'漏发',
                label:'漏发'
              }
            ],
            solveList:[
              {
                id:'1',
                value:'已处理',
                label:'已处理'
              },
                {
                    id:'2',
                    value:'线下补偿',
                    label:'线下补偿'
                },
                {
                    id:'3',
                    value:'补发',
                    label:'补发'
                },
                 {
                    id:'4',
                    value:'退积分',
                    label:'退积分'
                },
            ],
            rules:{
            },
            isSolve:'',
            typeVal:'',
            Mainlogic:'',
            id:'',
            editContent:[]
        }
    },
    created(){
        this.userId= localStorage.get("userID")
        this.id=this.$route.query.editData
        this.editComplaint()
    },
    methods:{
        editComplaint(){
            let parmas={
                complainId:this.id
            }
            let success=data=>{
                if(data.code=='OK'){
                    this.editContent=data.data
                    var Array=[]
                    if(data.data.complainOrder !== null){
                        Array.push(data.data.complainOrder)
                        this.tableParams.dataArray=Array
                    }
                } else{
                    this.$message.error(data.msg)
                }
            }
            api.erpComplaintGetOne(parmas,success)
        },
      //实现单选
      getTemplateRow(index,row){
        this.editContent.orderId=row.id;
        this.editContent.orderCode=row.orderId;
        this.editContent.customerName=row.receiverName;
        this.editContent.customerContact=row.receiverPhone
      },
        //跳转
        cancelAdd(){
            this.$router.push({
                path:'/complaint'
            })
        },
        handleOperation(rowIndex, row, methodName) {
            this.rowData=row
            if(methodName == "lookLogics"){
               this.findMainOrder()
            }else if(methodName == "details"){
                this.lookOrderDetail()
            }
        },
        //详情
        lookOrderDetail(){
          this.$router.push({
            path:"/order-query-detail",
            query:{
              id:this.rowData.id,
                orderCode:this.orderCode,
                path:'modify'
            }
          })
        },
        //根据订单编号查询
        findCustorInfo(){
          if(this.orderCode == ''){
            return this.$message.warning("请输入订单编号")
          }
            let parmas={
                orderCode:this.orderCode
            }
            let success=data=>{
                if(data.code=='OK'){
                    this.tableParams.dataArray=data.data
                } else{
                    this.$message.error(data.msg)
                }
            }
            api.orderQueryOrder(parmas,success)
        },
        //主订单物流信息查询
        findMainOrder(){
            if(this.rowData.expressCode == null){
                return this.$message.warning("快递单号为空")
            }
            let parmas={
                expressCode:this.rowData.expressCode
            }
            let success=data=>{
                if(data.code=="OK"){
                    this.Mainlogic=data.data
                    const h = this.$createElement;
                    this.$notify({
                        title: '物流信息',
                        message: h('i', { style: 'color: teal'}, this.Mainlogic)
                    });
                }else{
                    this.$message.error(data.msg)
                }
            }
            this.api.chcomformaSelectLogistics(parmas,success)
        },
        //表单提交
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.modifyComplaintOrder()
                } else {
                    return false;
                }
            });
        },
        //创建客服诉单
        modifyComplaintOrder(){
          var reg=/^(\-|\+?)\d+(\.\d+)?$/
          if(!reg.test(this.editContent.postageAssume)){
            return  this.$message.warning("输入的快递费用不正确")
          }
          if(!reg.test(this.editContent.extraCharges)){
            return  this.$message.warning("输入的额外费用不正确")
          }
            let parmas={
                complainId:this.editContent.complainId,
                orderId:this.editContent.orderId,
                orderCode:this.editContent.orderCode,
                customerName:this.editContent.customerName,
                customerContact:this.editContent.customerContact,
                complainType:this.editContent.complainType,
                complainReason:this.editContent.complainReason,
                complainSituation:this.editContent.complainSituation,
                complainSolution:this.editContent.complainSolution,
                isCost:this.editContent.isCost,
                costType:this.editContent.costType,
                responsibleParty:this.editContent.responsibleParty,
                postageAssume:this.editContent.postageAssume,
                extraCharges:this.editContent.extraCharges,
                returnExpressCode:this.editContent.returnExpressCode,
                remark:this.editContent.remark,
                userId:this.userId
            }
            this.isCallBtn=true
            let success=data=>{
                if(data.code == "OK"){
                    this.$message.success('修改客诉成功')
                    this.isCallBtn=false
                    this.$router.go(-1)
                }else{
                    this.$message.error(data.msg)
                    this.isCallBtn=false
                }
            }
            this.api.erpComplaintUpdate(parmas,success)
        },
        //退货的物流信息
        findReg(){
            if(this.editContent.returnExpressCode == null || this.editContent.returnExpressCode == ""){
                return this.$message.warning("请输入退货的快递单号")
            }
            let parmas={
                expressCode:this.editContent.returnExpressCode
            }
            let success=data=>{
                if(data.code=="OK"){
                   this.logicsReturn=data.data
                }else{
                    this.$message.error(data.msg)
                }
            }
            this.api.chcomformaSelectLogistics(parmas,success)
        },

    },
    components:{
      VTable,SplitVertical
    }
}
</script>
<style lang="scss" scoped>
.customerInfoMationContainer{
    .lookcustomer{
        .custAndorder{
            background: #fff;
            margin-bottom:2px;
            border-left: 2px solid #e8e8e8;
            border-right: 2px solid #e8e8e8;
            border-bottom: 2px solid #e8e8e8;
            .order{
                line-height:65px;
                margin-left: 10px;
            }
        }
        .custdetail{
            margin-bottom: 2px;
            background: #fff;
            border-left: 2px solid #e8e8e8;
            border-right: 2px solid #e8e8e8;
            border-bottom: 2px solid #e8e8e8;
        }
        .complaintInfomation{
            padding:0 10px;
            background: #fff;
            border-left: 2px solid #e8e8e8;
            border-right: 2px solid #e8e8e8;
            border-bottom: 2px solid #e8e8e8;
            .el-select{
                width:100%;
            }
            .find{
                position:relative;
                p{
                    position:absolute;
                    left:100%;
                    top:-5%;
                }
            }

        }
        .btn{
            width:100%;
            text-align:center;
            padding:10px 0;
        }
    }
}
</style>
